<template>
  <div  class="table-search-page">
    <a-card :bodyStyle="tstyle" :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline" :form="form" :selfUpdate="true">
          <a-row :gutter="12">
            <a-col :md="12" :lg="6" :sm="12" style="padding: 0 4px">
              <a-form-item label="接诊日期">
                <a-range-picker allow-clear v-decorator="['registDate']" style="width: 100%">
                  <a-icon slot="suffixIcon" type="calendar" />
                </a-range-picker>
              </a-form-item>
            </a-col>
            <a-col :md="12" :lg="5" :sm="12" style="padding: 0 4px">
              <a-form-item label="客户卡号">
                <a-input @change="clearSpace" @pressEnter="clickSearch" v-decorator="['cardNo']" allow-clear placeholder="客户卡号" />
              </a-form-item>
            </a-col>
            <a-col :md="12" :lg="5" :sm="12" style="padding: 0 4px">
              <a-form-item @pressEnter="clickSearch" label="联系号码">
                <a-input @change="clearSpace" @pressEnter="clickSearch" :maxLength="20" v-decorator="['tel']" allow-clear placeholder="联系号码" />
              </a-form-item>
            </a-col>
            <a-col :md="12" :lg="4" :sm="12" style="padding: 0 4px">
              <a-form-item @pressEnter="clickSearch" label="客户姓名">
                <a-input @change="clearSpace" v-decorator="['name']" style="width: 100%" allow-clear placeholder="姓名" />
              </a-form-item>
            </a-col>
            <a-col :md="2" :lg="4" :sm="12">
              <div class="table-page-search-submitButtons g-flex" style="margin-bottom: 4px">
                <a-icon :type="advanced ? 'up' : 'down'" @click="advanced = !advanced" style="margin-right: 15px" />
                <a-button type="primary" @click="clickSearch">查询</a-button>
                <a-button style="margin-left: 8px" @click="clickReset">重置</a-button>
              </div>
            </a-col>
          </a-row>
          <a-row :gutter="12" v-show="advanced">
            <a-col :md="12" :lg="6" :sm="12" style="padding: 0 4px">
              <a-form-item label="所属咨询">
                <a-select
                  :showSearch="true"
                  option-filter-prop="children"
                  allow-clear
                  option-label-prop="label"
                  style="width: 100%"
                  v-decorator="['consultMan']"
                  placeholder="选择，搜索"
                >
                  <a-select-option
                    v-for="item in allHisUser.userList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    >{{ item.name }}</a-select-option
                  >
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :lg="5" :sm="12" style="padding: 0 4px">
              <a-form-item label="开发人员">
                <a-select
                  :showSearch="true"
                  option-filter-prop="children"
                  allow-clear
                  option-label-prop="label"
                  style="width: 100%"
                  v-decorator="['developer']"
                  placeholder="选择，搜索"
                >
                  <a-select-option
                    v-for="item in developerUser.userList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    >{{ item.name }}</a-select-option
                  >
                </a-select>
              </a-form-item>
            </a-col>
            
            <a-col :md="12" :lg="5" :sm="12" style="padding: 0 4px">
              <a-form-item label="就诊状态">
                <a-select
                  allow-clear
                  option-label-prop="label"
                  style="width: 100%"
                  v-decorator="['admissionState']"
                  placeholder="状态类型"
                >
                    <a-select-option v-for="item in stateList" :key="item.id" :label="item.name" :value="item.id">{{
                    item.name
                  }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="12" v-show="advanced">
            
            <a-col :span="16" style="padding: 0 4px">
              <!-- <a-form-item label="客户状态">
                <a-select
                  allow-clear
                  option-label-prop="label"
                  style="width: 100%"
                  v-decorator="['customerState']"
                  placeholder="状态"
                >
                  <a-select-option v-for="item in customerState" :key="item.id" :label="item.name" :value="item.id">{{
                    item.name
                  }}</a-select-option>
                </a-select>
            
              </a-form-item> -->

              <a-form-item
                  label="咨询项目"
                  :wrapperCol="wrapperCol"
                  has-feedback>
                  <!-- <a-cascader
                    allow-clear        
                    :options="ConsultationAppeal"
                    expand-trigger="hover"         
                    v-decorator="['receive_item_id']"
                    placeholder="选择，可搜索"
                  /> -->
                   
                   <!--   :show-checked-strategy=TreeSelect.SHOW_PARENT -->
                     <!-- v-model="value" -->
                  <a-tree-select
                     allow-clear  
                     v-decorator="['receive_item_id']"
                     placeholder="选择咨询项目,可多选"
                    style="width: 100%;z-index: 500;"
                    :tree-data="ConsultationAppeal"
                    tree-checkable      
                    search-placeholder="请选择"
                  />

                </a-form-item>
            </a-col>
           
          </a-row>
        </a-form>
      </div>
    </a-card>
    <a-card :bodyStyle="tstyle" :bordered="false">
      <a-row :gutter="[24]">
        <a-col :sm="12" :lg="8" :xxl="4" style="margin-bottom: 10px;">
          <div class="g-flex g-y-center">
            <div>来院：<span style="color: #3399ff;">{{ dataObject?dataObject.VisitStatistics.overAll:0 }}</span> 人</div>
            <div style="margin-left: 20px">成交 <span style="color: #3399ff;">{{dataObject? dataObject.VisitStatistics.dealAll:0 }}</span> 人</div>
          </div>
        </a-col>
        <a-col :sm="12" :lg="8" :xxl="4" style="margin-bottom: 10px;">
          <div class="g-flex g-y-center">
            <div>初诊：<span style="color: #3399ff;">{{ dataObject?dataObject.FirstVisit.overAll :0 }}</span>人</div>
            <div style="margin-left: 20px">成交<span style="color: #3399ff;">{{ dataObject?dataObject.FirstVisit.dealAll:0  }}</span>人</div>
          </div>
        </a-col>
        <a-col :sm="12" :lg="8" :xxl="4" style="margin-bottom: 10px;">
          <div class="g-flex g-y-center">
            <div>复诊：<span style="color: #3399ff;">{{ dataObject?dataObject.FollowUp.overAll:0  }}</span>人</div>
            <div style="margin-left: 20px">成交<span style="color: #3399ff;">{{ dataObject?dataObject.FollowUp.dealAll:0  }}</span>人</div>
          </div>
        </a-col>
        <a-col :sm="12" :lg="8" :xxl="4" style="margin-bottom: 10px;">
          <div class="g-flex g-y-center">
            <div>再消费：<span style="color: #3399ff;">{{dataObject? dataObject.ReConsumption.overAll:0  }}</span>人</div>
            <div style="margin-left: 20px">成交<span style="color: #3399ff;">{{ dataObject?dataObject.ReConsumption.dealAll:0  }}</span>人</div>
          </div>
        </a-col>
        <a-col :sm="12" :lg="8" :xxl="4" style="margin-bottom: 10px;">
          <div class="g-flex g-y-center">
            <div>复查：<span style="color: #3399ff;">{{ dataObject?dataObject.Review.overAll :0 }}</span>人</div>
            <div style="margin-left: 20px">成交<span style="color: #3399ff;">{{ dataObject?dataObject.Review.dealAll:0  }}</span>人</div>
          </div>
        </a-col>
        <a-col :sm="12" :lg="8" :xxl="4" style="margin-bottom: 10px;">
          <div class="g-flex g-y-center">
            <div>其他：<span style="color: #3399ff;">{{dataObject? dataObject.Other.overAll :0 }}</span>人</div>
            <div style="margin-left: 20px">成交<span style="color: #3399ff;">{{ dataObject?dataObject.Other.dealAll:0  }}</span>人</div>
          </div>
        </a-col>
      </a-row>

    </a-card>
    <a-card :bordered="false">
      <super-table
        :scroll="{ x: 800 }"
        style="margin: 0px -15px"
        ref="customerList"
        :bordered="true"
        size="small"
        :pageSize="20"
        :columns="columns"
        :data="loadListData"
        :rowKey="(record, index) => index"
      >
        <!--序号-->
        <template slot="index" slot-scope="text, record, index">
          <span>{{ (queryParam.pageNum - 1) * queryParam.pageSize + (index + 1) }}</span>
        </template>
        <!--客户卡号-->
        <template slot="cardNo" slot-scope="text, record">
          <div class="g-flex g-y-center g-x-center">
            <a class="g-f-14"  @click="toDetails(text, record)">{{ text }}</a>
            <a-tooltip placement="top">
              <template slot="title"> 复制 </template>
              <a-icon type="copy" @click="ConCopy(text)" theme="twoTone" two-tone-color="#3399ff" style="margin-left: 10px;cursor: pointer;" />
            </a-tooltip>
          </div>
        </template>
        <!--客户姓名 和 性别-->
        <template slot="sex" slot-scope="text, record">
           <div style="display:flex;flex-direction:row;align-items: center;justify-content: center;">
                 <img v-if="record.sex == '女'" src="../../../assets/wan_sex_w.png" style="width:14px;height:14px" alt="">
                 <img v-if="record.sex == '男'" src="../../../assets/wan_sex_m.png" style="width:14px;height:14px" alt="">
                 <span>{{record.name}}</span>
             </div>
        </template>
        
        <!--联系方式-->
        <template slot="customerContact" slot-scope="text">
          <div class="g-flex g-y-center" style="margin:0 auto;display:block;margin-top: 5px;" v-for="(item, index) in text" :key="index">
            <img v-if="item.contactType === 'tel'" :src="require('@/assets/tel.png')" alt="" width="25" />
            <img v-else-if="item.contactType === 'phone'" :src="require('@/assets/phone.png')" alt="" width="25" />
            <img v-else-if="item.contactType === 'wechat'" :src="require('@/assets/wechat.png')" alt="" width="25" />
            <img v-else-if="item.contactType === 'qq'" :src="require('@/assets/qq.png')" alt="" width="25" />
            <img v-else :src="require('@/assets/orther.png')" alt="" width="25" />
            <span style="margin-left: 5px">{{ item.contactContent }}</span>
          </div>
        </template>
        <!-- 成交状态 -->
        <template slot="state" slot-scope="row">
           <span style="color:green;font-weight:600" v-if="row.dealState == '已成交'">{{row.dealState}}</span>
           <span v-else>{{row.dealState}}</span>
        </template>
      </super-table>
    </a-card>
  </div>
</template>

<script>
import { AllHisUser, CustomerLevel, CustomerState, getUserTel,receptionList,ReceptionCountList } from '@/api/customer/customer'
import {
  getClientDemandName,
} from '@/api/modular/main/customer/customerConsultation'
import { dictTypeListForCode } from '@/api/modular/main/customer/customerTriage'
import { SuperTable } from '@/components'
import moment from 'moment'
import CallSelect from '@/components/Phone/CallSelect'
export default {
  components: {
    SuperTable,
    CallSelect,
  },
  data() {
    return {
       wrapperCol: {
        xs: { span: 24 },
        sm: { span: 15 }
      },
      tel_arr: [], //联系号码数组
      form: this.$form.createForm(this),
      allHisUser: {}, //全员员工
      developerUser:{},//所属咨询
      customerLevel: [], //客户等级
      customerState: [], //客户状态
      advanced: false, // 高级搜索 展开/关闭
      // tstyle: {'padding': '24px  30px 0 0px', 'margin-bottom': '10px'},
      tstyle: { 'margin-bottom': '10px' },
      loadListData: (parameter) => {
        // console.log('parameter',parameter)
        this.queryParam.pageNum = parameter.pageNum
        this.queryParam.pageSize = parameter.pageSize
        return receptionList(this.queryParam).then((res) => {
            this.getReceptionCountList()
            return res
        })
      },
      columns: [
        { title: '序号', align:'center', scopedSlots: { customRender: 'index' }, width: 70, fixed: 'left' },
        { title: '就诊状态', align:'center', dataIndex: 'admissionState', width: 100 ,fixed:'left',ellipsis: true,},
        { title: '客户卡号', align:'center', dataIndex: 'cardNo', scopedSlots: { customRender: 'cardNo' }, width: 120 ,ellipsis: true, fixed: 'left' },
        // { title: '客户姓名', align:'center', dataIndex: 'name', width: 100,ellipsis: true },
        { title: '客户姓名',align:'center', dataIndex: 'sex', scopedSlots: {customRender: 'sex'},  width: 150 ,fixed: 'left'},
        { title: '客户年龄', align:'center', dataIndex: 'age', customRender: (age) => (age ? age : '无'), width: 80 ,ellipsis: true,fixed: 'left'},
        // { title: '性别', dataIndex: 'sex', align:'center', width: 90,ellipsis: true },
        { title: '登记时间', align:'center', dataIndex: 'registerTime', width: 150,ellipsis: true },
        { title: '主诉项目', align:'center', dataIndex: 'receiveItemName', width: 100 ,ellipsis: true},
        { title: '接诊时间', align:'center', dataIndex: 'treatDate', width: 150,ellipsis: true },
        { title: '分诊人', align:'center', dataIndex: 'triageMan', width: 90 ,ellipsis: true},
        { title: '接待日期', align:'center', dataIndex: 'receiveTime', width: 150 ,ellipsis: true},
        { title: '接诊咨询', align:'center', dataIndex: 'consultMan', width: 90 ,ellipsis: true},
        
        { title: '所属咨询', align:'center', dataIndex: 'tConsultManId', width: 90 ,ellipsis: true},
        { title: '咨询助理', align:'center', dataIndex: 'consultAssistant', width: 90 ,ellipsis: true},
        { title: '开发员', align:'center', dataIndex: 'developer', width: 90,ellipsis: true },
        { title: '区域来源', align:'center', dataIndex: 'area', width: 100 ,ellipsis: true},
        { title: '信息来源', align:'center', dataIndex: 'infoSource', width: 100 ,ellipsis: true},  
        { title: '分诊备注', align:'center', dataIndex: 'remark', width: 100 ,ellipsis: true},
        { title: '成交状态', align:'center', scopedSlots: { customRender: 'state' }, width: 100 ,ellipsis: true, fixed: 'right'},
      ],
      data: [],
      // 查询参数
      queryParam: {
        pageNum: 1, //第几页
        pageSize: 20, //每页中显示数据的条数
        consultTimeStart: undefined,
        consultTimeEnd: undefined
      },
      loading: false, //加载状态
      tempConsultManFlag: false,
      dataObject:'',
      ConsultationAppeal:[],
      stateList:[{
        name:"初诊",
        id:"09011301",

      },{
        name:"复诊",
        id:"09011302",

      },{
        name:"再消费",
        id:"09011303",

      },{
        name:"复查",
        id:"09011304",

      },{
        name:"其他",
        id:"09011305",
      }],
       receive_item_id: [],
     
    }
  },
  activated(){
    this.$refs.customerList.refresh()
  },
  created() {
    // dictTypeListForCode  AllHisUser  所属咨询
    dictTypeListForCode({code:"XCZXS"}).then((res) => {
      // console.log('全员员工接口',res)
      this.allHisUser = res
    })
    // 开发人员 
     dictTypeListForCode({code:"WLZXS"}).then((res) => {
      // console.log('全员员工接口',res)
      this.developerUser = res
    })

    CustomerLevel().then((res) => {
      this.customerLevel = res
    })
    CustomerState().then((res) => {
      this.customerState = res
    })
    // this.getReceptionCountList()
    this.getConsultationAppeal()
    


  },
  methods: {
    clearSpace(e){
      // console.log("e",e.target.value)
       e.target.value=e.target.value.replace(/\s+/g,'')
    },
    filter(inputValue, path) {
      return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
    },
    getConsultationAppeal(){
      getClientDemandName().then(res => {
        this.ConsultationAppeal = res.rows
    
      })
    },
    getReceptionCountList(){
      // this.queryParam
      ReceptionCountList(this.queryParam).then(res=>{
        this.dataObject = res.data
      })
    },
    queryTelNumber(record) {
      console.log(record)
      const id = record.customerId
      getUserTel(id).then((res) => {
        console.log('电话号码：', res)
        this.tel_arr = res.data
        this.$refs.CallSelect.show()
      })
    },
    //点击查询
    clickSearch() {
      const form_values = this.form.getFieldsValue()

      let idArr= form_values.receive_item_id||[]
      if(idArr.length==0){
        form_values.receive_item_id=undefined
      }
      // if(form_values.receive_item_id && form_values.receive_item_id.length>1){
      //   let id = form_values.receive_item_id[1]
      //   form_values.receive_item_id=id
      // }else{
      //   form_values.receive_item_id=undefined
      // }
      // console.log(form_values)
      const time = form_values.registDate
      if (time && time.length > 0) {
        form_values.consultTimeStart = moment(time[0]).format('YYYY-MM-DD')
        form_values.consultTimeEnd = moment(time[1]).format('YYYY-MM-DD')
        form_values.registDate = undefined
      }
      /**表单转换为查询参数*/
      this.queryParam = Object.assign(this.queryParam,form_values)
      this.$refs.customerList.refresh(true)
      // this.getReceptionCountList()

    },
    clickReset() {
      this.form.resetFields()
      this.queryParam={}
      this.queryParam.pageSize=10
      this.queryParam.pageNum=1
    },

    //点击查看客户详情
    toDetails(text, tags, i = 0) {
      this.$router.push({
        path: 'customer_details',
        query: {
          id: tags.customerId,
          card_no: tags.cardNo,
          customerName:tags.name
        },
      })
    },
  },
}
</script>

<style lang="less" scoped>
//.table-operator {
//  margin-bottom: 18px;
//}
///deep/ .ant-calendar-date-panel {
//  display: flex;
//}
///deep/ .ant-calendar-input {
//  flex: 1;
//  width: 100%;
//}
///deep/ .ant-calendar-input[placeholder] {
//  text-align: center !important;
//}
//button {
//  margin-right: 8px;
//}
///deep/ .ant-col {
//  padding: 0 12px !important;
//}
//


</style>